<template>
  <view class="redpacket-page">
    <!-- 导航栏 -->
    <up-navbar :title="useT('红包')" left-icon="arrow-left" left-icon-color="#333" bg-color="#feeeec" :autoBack="true"></up-navbar>

    <!-- 主要内容 -->
    <view class="main-content">
      <!-- 插画区域 -->
      <view class="illustration-section">
        <view class="illustration-container">
          <!-- 使用图片插画 -->
          <image class="redpacket-illustration" src="@/static/mine/redpacket.png" mode="aspectFit" />
        </view>
      </view>

      <!-- 输入口令区域 -->
      <view class="input-section">
        <view class="input-container">
          <input class="password-input" :placeholder="useT('输口令,收红包')" v-model="password" @confirm="confirmPassword" />
          <view class="confirm-btn" @click="confirmPassword">{{ useT('确定') }}</view>
        </view>
      </view>

      <!-- 操作按钮区域 -->
      <view class="action-buttons">
        <view class="action-card" @click="sendRedPacket">
          <view class="action-content">
            <text class="action-text">{{ useT('发红包') }}</text>
            <up-icon name="arrow-right" size="16" color="#666"></up-icon>
          </view>
        </view>

        <view class="action-card" @click="sendCardToFriend">
          <view class="action-content">
            <text class="action-text">{{ useT('送卡给朋友') }}</text>
            <up-icon name="arrow-right" size="16" color="#666"></up-icon>
          </view>
        </view>
      </view>

      <!-- 红包规则说明 -->
      <view class="rules-section">
        <view class="rules-card">
          <view class="rules-title">{{ useT('红包规则') }}</view>

          <view class="rule-item">
            <view class="rule-question">{{ useT('什么是红包?') }}</view>
            <view class="rule-answer">{{ useT('红包支持随机分配加密货币。如要领取红包,您需要持有红包所有者分享的链接、二维码或口令。') }}</view>
          </view>

          <view class="rule-item">
            <view class="rule-question">{{ useT('如何发放红包?') }}</view>
            <view class="rule-answer">{{ useT('前往"支付-红包-立即创建"。输入红包总额和要发放的个数,即可生成红包。您可以通过分享链接、二维码或红包口令发放红包,接收人可直接领取您的红包。') }}</view>
          </view>

          <view class="rule-item">
            <view class="rule-question">{{ useT('如何领取红包?') }}</view>
            <view class="rule-answer">{{ useT('通过分享的链接、二维码或红包口令进入红包页面,点击"领取红包"即可获得随机分配的加密货币。') }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useT } from '@/utils/i18n.js';
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';

// 响应式数据
const password = ref('');

// 确认口令
const confirmPassword = () => {
  return uni.showModal({
    title: useT('提示'),
    content: useT('暂未开放此功能'),
    showCancel: false,
    confirmText: useT('我知道了')
  });
  if (!password.value.trim()) {
    uni.showToast({
      title: '请输入红包口令',
      icon: 'none'
    });
    return;
  }

  // 处理红包口令逻辑
  uni.showToast({
    title: '正在验证红包口令...',
    icon: 'loading'
  });

  // 这里可以添加验证红包口令的API调用
  setTimeout(() => {
    uni.showToast({
      title: '红包口令验证成功',
      icon: 'success'
    });
  }, 2000);
};
onShow(() => {
  uni.showModal({
    title: useT('提示'),
    content: useT('暂未开放此功能'),
    showCancel: false,
    confirmText: useT('我知道了')
  });
});
// 发红包
const sendRedPacket = () => {
  uni.showModal({
    title: useT('提示'),
    content: useT('暂未开放此功能'),
    showCancel: false,
    confirmText: useT('我知道了')
  });
  // 这里可以跳转到发红包页面
  // uni.navigateTo({
  //   url: '/pagesA/redpacket/send'
  // })
};

// 送卡给朋友
const sendCardToFriend = () => {
  uni.showModal({
    title: useT('提示'),
    content: useT('暂未开放此功能'),
    showCancel: false,
    confirmText: useT('我知道了')
  });
  // 这里可以跳转到送卡页面
  // uni.navigateTo({
  //   url: '/pagesA/card/send'
  // })
};
</script>

<style lang="scss" scoped>
.redpacket-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #feeeec 30%, #f8f8f8 50%);
}

.main-content {
  padding-top: calc(var(--status-bar-height) + 44px);
  padding-bottom: 40rpx;
}

.illustration-section {
  padding: 60rpx 30rpx;
  display: flex;
  justify-content: center;
}

.illustration-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 510rpx;
  height: 384rpx;
}

.redpacket-illustration {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
}

.input-section {
  padding: 0 30rpx 40rpx;
}

.input-container {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50rpx;
  padding: 0 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.password-input {
  flex: 1;
  height: 80rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  background: transparent;
  border: none;
  outline: none;
}

.confirm-btn {
  background: #12c284;
  color: white;
  padding: 16rpx 32rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: 500;
}

.action-buttons {
  padding: 0 30rpx 40rpx;
}

.action-card {
  background: white;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.action-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
}

.action-text {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.rules-section {
  padding: 0 30rpx;
}

.rules-card {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.rules-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 30rpx;
}

.rule-item {
  margin-bottom: 30rpx;
}

.rule-item:last-child {
  margin-bottom: 0;
}

.rule-question {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 15rpx;
}

.rule-answer {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}
</style>
